import { PlusCircleOutlined } from "@ant-design/icons";
import { Button, Space } from "antd";
import SearchForm from "./components/SearchForm";
import TableComponent from "./components/TableComponent";
import usePaginationHooks from "../../hooks/usePaginationHooks";
import { useEffect, useState } from "react";
import { SoapOpera } from "../../Types/SoapOpera";
import { ListRequestParams } from "../../Types/Requset";
import { SoapOperaEditFormDialog } from "./components/SoapOperaEditFormDialog";
import { FormDialogProps } from "../../Types/FormDialogProps";
import { deleteSoapOpera, getSoapOperaList } from "../../api/soapOperaManage";

function SoapOperaManage() {
    const { total, setTotal, pageNum, setPageNum, pageSize, setPageSize } =
        usePaginationHooks();

    const [soapOperaList, setSoapOperaList] = useState<SoapOpera[]>([]);

    const [soapOperaEditFormDialogProps, setSoapOperaEditFormDialogProps] =
        useState<FormDialogProps<SoapOpera>>({
            open: false,
            title: "",
            detail: {} as SoapOpera,
        });

    function querySoapOperaList(params: ListRequestParams<SoapOpera>) {
        console.log("query");
        getSoapOperaList(params).then((res) => {
            setTotal(res.data.total);
            setSoapOperaList(res.data.list);
        });
    }

    function onClickCreate() {
        setSoapOperaEditFormDialogProps({
            open: true,
            title: "新增",
            detail: {} as SoapOpera,
        });
    }

    function onSearch(values: SoapOpera) {
        console.log("search");

        setPageNum(1);
        querySoapOperaList({
            pageNum: 1,
            pageSize,
            params: values,
        });
    }
    function onReset() {
        console.log("reset");
        setPageNum(1);
        querySoapOperaList({
            pageNum: 1,
            pageSize,
        });
    }

    function onChangePage(page: number, pageSize: number) {
        setPageNum(page);
        setPageSize(pageSize);

        querySoapOperaList({
            pageNum: pageNum,
            pageSize: pageSize,
        });
    }

    function onClickEdit(recoder: SoapOpera) {
        setSoapOperaEditFormDialogProps({
            title: "编辑",
            detail: recoder,
            open: true,
        });
    }
    function onClickRemove(recoder: SoapOpera) {
        deleteSoapOpera([recoder.id]).then(() => {
            querySoapOperaList({
                pageNum,
                pageSize,
            });
        });
    }

    function onCancelEditFormDialog() {
        setSoapOperaEditFormDialogProps({
            open: false,
            title: "",
            detail: {} as SoapOpera,
        });
    }

    function onOkEditFormDialog() {
        querySoapOperaList({
            pageNum,
            pageSize,
        });
        setSoapOperaEditFormDialogProps({
            open: false,
            title: "",
            detail: {} as SoapOpera,
        });
    }

    useEffect(() => {
        querySoapOperaList({
            pageNum,
            pageSize,
        });
    }, []);

    return (
        <div className="">
            <Space direction="vertical" style={{ width: "100%" }}>
                <Space
                    align="end"
                    style={{
                        width: "100%",
                        justifyContent: "space-between",
                        padding: "0 24px",
                    }}
                >
                    <div className="breadcrumb_container">
                        <div className="page-name_container">
                            <div className="page-name">番剧管理</div>
                        </div>
                        {/* <Divider
                            type="vertical"
                            style={{ height: "28px", borderWidth: "2px" }}
                        ></Divider> */}
                    </div>

                    <Button type="primary" onClick={onClickCreate}>
                        <PlusCircleOutlined></PlusCircleOutlined>
                        新增
                    </Button>
                </Space>

                <SearchForm onSearch={onSearch} onReset={onReset}></SearchForm>

                <TableComponent
                    dataSource={soapOperaList}
                    total={total}
                    pageSize={pageSize}
                    onChangePage={onChangePage}
                    onClickEdit={onClickEdit}
                    onClickRemove={onClickRemove}
                ></TableComponent>
            </Space>
            <SoapOperaEditFormDialog
                {...soapOperaEditFormDialogProps}
                onCancel={onCancelEditFormDialog}
                onOk={onOkEditFormDialog}
            ></SoapOperaEditFormDialog>
        </div>
    );
}
export default SoapOperaManage;
